<template>
	<view class="content" v-cloak>
	    <form>
			<view class="cu-form-group">
				<view class="title">原手机号</view>
				<input placeholder="输入原手机号" v-model="oldPhone" type="number" name="yphone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view> 
				<input placeholder="输入验证码" type="number" v-model="code" name="code"></input>
				<button class='cu-btn bg-green' @click="getCode">{{codes}}</button>
			</view>
			<view class="cu-form-group">
				<view class="title">新手机号</view>
				<input placeholder="输入新手机号" type="number" v-model="xinPhone" name="nphone"></input>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-grey lg" @click="queding">确认修改</button>
			</view>
		</form>	
	</view>	
</template>

<script>
	export default {
		data(){
			return{
				oldPhone:'',
				xinPhone:'',
				stus:true,
				sunmax: 60,
				code:'',
				codes: '发送验证码'
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad(){
			
		},
		methods:{
			queding(){
				if(this.oldPhone == ''){
					this.$api.msg("旧手机号不能为空");
				}else if(!(/^1[345789]\d{9}$/.test(this.oldPhone))) {
					this.$api.msg("请输入正确的旧手机号");
				}else if(this.code == ''){
					this.$api.msg("验证码不能为空");
				}else if(this.xinPhone == '') {
					this.$api.msg("新手机号不能为空");
				}else if(!(/^1[345789]\d{9}$/.test(this.xinPhone))) {
					this.$api.msg("请输入正确的新手机号");
				}else{
					var obj = {
						mobile : this.xinPhone,
						captcha : this.code
					}
					this.$common.requests('/api/user/changemobile', obj).then(res => {
						this.$api.msg(res.data.msg);
						if(res.data.code == 1){
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						}
					})
				}
			},
			getCode(){
				if(this.stus){
					if ((/^1[345789]\d{9}$/.test(this.oldPhone))) {
						this.stus = false;
						this.codes = this.sunmax;
						let timeInt = setInterval(() => {
							this.codes--
							if (this.codes <= 0) {
								this.stus = true;
								this.codes = '获取验证码';
								clearInterval(timeInt)
							}
						}, 1000)
						var obj = {
							mobile: this.phone
						}
						this.$common.requests('/api/user/sendSMS', {mobile : this.oldPhone}).then(res => {
							this.$api.msg(res.data.msg);
						})
					} else {
						this.$api.msg('请输入正确的手机号');
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		height: 100%;
		background: $uni-color-bei;
	}	
	.cu-form-group:nth-child(1){
		border-top: 1px solid $uni-color-bei;
	}
	.bg-green{
		background: #fff;
		color: $uni-bt-color;
	}
	.title{
		min-width: 150upx;
	}
	.shadow{
		box-shadow: #fff!important;
	}
	[v-cloak] {
	  display: none;
	}
	.lg{
		background: $uni-bt-color;
		color: #fff;
		width: 90%;
		position: fixed;
		bottom: 5%;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
